<template>
  <div class="min-h-screen bg-gradient-to-br from-blue-50 to-purple-50 py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <!-- Header -->
      <div class="text-center mb-12">
        <h1 class="text-4xl font-bold text-gray-900 mb-4">
          <span class="text-gradient">游戏工具</span>
        </h1>
        <p class="text-xl text-gray-600 max-w-3xl mx-auto">
          轻量小游戏集合，放松一下 — 当前提供经典贪吃蛇,飞机大战，五子棋,手速测试，猫咪跑酷等小游戏
        </p>
      </div>

      <!-- Tool Grid -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div v-for="tool in gameTools" :key="tool.id" class="tool-card">
          <div class="flex items-start space-x-4">
            <div class="w-12 h-12 bg-gradient-to-br from-green-400 to-teal-600 rounded-lg flex items-center justify-center flex-shrink-0">
              <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="tool.icon"></path>
              </svg>
            </div>
            <div class="flex-1">
              <h3 class="text-lg font-semibold text-gray-900 mb-2">{{ tool.name }}</h3>
              <p class="text-gray-600 text-sm mb-3">{{ tool.description }}</p>
              <NuxtLink :to="tool.path" class="primary-button inline-block">
                开始游戏
              </NuxtLink>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const gameTools = [
  {
    id: 1,
    name: '贪吃蛇',
    description: '经典贪吃蛇小游戏，使用键盘方向键控制，支持计分与重玩',
    path: '/game-tools/snake',
    icon: 'M3 10h18M3 6h18M3 14h18M3 18h18'
  },
  {
    id: 2,
    name: '飞机大战',
    description: '简易射击游戏，躲避并消灭敌机，获取更高分数',
    path: '/game-tools/plane',
    icon: 'M12 2l3 6-3 1-3-1 3-6z'
  },
  {
    id: 3,
    name: '五子棋',
    description: '15x15 棋盘，轮流落子，五子连珠胜利',
    path: '/game-tools/gomoku',
    icon: 'M4 4h16v16H4z'
  },
  {
    id: 4,
    name: '黄金矿工',
    description: '简化版黄金矿工，控制钩子抓取矿物并得分',
    path: '/game-tools/miner',
    icon: 'M12 2v20M5 9h14'
  },
  {
    id: 5,
    name: '2048',
    description: '经典合并数字游戏，移动方块合并到 2048',
    path: '/game-tools/2048',
    icon: 'M3 3h6v6H3z'
  }
  ,
  {
    id: 6,
    name: '猫咪跑酷',
    description: '未来城市风格的猫咪跑酷，躲避障碍并尽可能获得高分',
    path: '/game-tools/cat-runner',
    icon: 'M12 2l3 6-3 1-3-1 3-6z'
  },
  {
    id: 7,
    name: '手速测试',
    description: '测试你的手速，挑战极限反应时间，看看你有多快！',
    path: '/game-tools/hand-speed',
    icon: 'M12 2l3 6-3 1-3-1 3-6z'
  },
  {
    id: 8,
    name: '拉弓射箭',
    description: '测试你的手速，挑战极限反应时间，看看你有多快！',
    path: '/game-tools/archery',
    icon: 'M12 2l3 6-3 1-3-1 3-6z'
  },
  {
    id: 9,
    name: '接瓶子比手速',
    description: '测试你的手速，挑战极限反应时间，看看你有多快！',
    path: '/game-tools/catch-bottle',
    icon: 'M12 2l3 6-3 1-3-1 3-6z'
  }
]

useHead({
  title: '游戏工具 - 八八在线工具',
  meta: [
    { name: 'description', content: '轻量小游戏集合，包含贪吃蛇等小游戏，适合放松娱乐' },
    { property: 'og:title', content: '游戏工具 - 八八在线工具' },
    { property: 'og:description', content: '轻量小游戏集合，包含贪吃蛇,手术测试，跑酷等小游戏，适合放松娱乐' }
  ]
})
</script>
